<template>
  <div class="app-container table-none">
    <div class="title">车道基本信息</div>
    <!-- <div >岢岚收费站</div> -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="purple">
          <div class="subtitle">入口车道</div>
          <div>
            <el-button type="primary" @click.stop="bindAddTable(1)">添加</el-button>
            <el-button type="primary" @click.stop="bindEditTable(1)">编辑</el-button>
            <el-button type="primary" @click.stop="bindDelTable(1)">删除</el-button>
          </div>
        </div>
        <el-table :data="postData" style="width: 100%" @selection-change="handleSelectionChange($event,1)" show-overflow-tooltip>
          <el-table-column type="selection" width="65" />
          <el-table-column prop="laneNo" label="车道编号">
            <template #default="scope">
              <div v-if="isEdit">
                <el-input v-model="postData[scope.$index].laneNo" placeholder="请输入" @input="bindChangeForm($event,scope.$index,'laneNo')" class="inputDeep" />
              </div>
              <div v-else>{{postData[scope.$index].laneNo}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="laneName" label="车道名称">
            <template #default="scope">
              <div v-if="isEdit">
                <el-select v-model="postData[scope.$index].laneName" @change="bindChangeSelect($event,scope.$index,'postData')">
                  <el-option v-for="item in lane_name" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div v-else>{{postData[scope.$index].laneName=='1'?'ETC车道':postData[scope.$index].laneName=='2'?'MTC车道':'混合车道'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="laneStatus" label="车道状态"><template #default="scope">
              <div>
                <el-switch class="switch" v-model="postData[scope.$index].laneStatus" active-value="2" inactive-value="1"
                  @change="bindChangeSwitch($event,'postData',scope.$index,'laneStatus')" />{{postData[scope.$index].laneStatus==2?'启用':'禁用'}}
              </div>
              <!-- <div v-else>{{postData[scope.$index].laneStatus==2?'启用':'禁用'}}</div> -->
            </template>
          </el-table-column>
          <el-table-column prop="laneType" label="车道类型" width="160">
            <template #default="scope">
              <div>
                <el-switch class="switch" v-model="postData[scope.$index].laneType" active-text="ETC" inactive-text="人工" active-value="1" inactive-value="2" @change="bindChangeSwitch($event,'postData',scope.$index,'laneType')" />
              </div>
              <!-- <div v-else>{{postData[scope.$index].laneType==1?'ETC':'人工'}}</div> -->
            </template>
          </el-table-column>
        </el-table>

        <el-button type="primary" v-if="isEdit" @click="submitForm('postData')" class="el-btn">保存</el-button>
      </el-col>
      <el-col :span="12">
        <div class="purple">
          <div class="subtitle">出口车道</div>
          <div>
            <el-button type="primary" @click.stop="bindAddTable(2)">添加</el-button>
            <el-button type="primary" @click.stop="bindEditTable(2)">编辑</el-button>
            <el-button type="primary" @click.stop="bindDelTable(2)">删除</el-button>
          </div>
        </div>
        <el-table :data="postExportData" style="width: 100%" @selection-change="handleSelectionChange($event,2)">
          <el-table-column type="selection" width="65" />
          <el-table-column prop="laneNo" label="车道编号">
            <template #default="scope">
              <div v-if="isExportEdit">
                <el-input v-model="postExportData[scope.$index].laneNo" placeholder="请输入" @input="bindChangeForm($event,scope.$index,'laneNo')"
                  class="inputDeep" />
              </div>
              <div v-else>{{postExportData[scope.$index].laneNo}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="laneName" label="车道名称">
            <template #default="scope">
              <div v-if="isExportEdit">
                <!-- <el-input v-model="postData[scope.$index].laneName" placeholder="请输入" @input="bindChangeForm($event,scope.$index,'laneName')"
                  class="inputDeep" /> -->
                <el-select v-model="postExportData[scope.$index].laneName" @change="bindChangeSelect($event,scope.$index,'postExportData')">
                  <el-option v-for="item in lane_name" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div v-else>{{postExportData[scope.$index].laneName==1?'ETC车道':postExportData[scope.$index].laneName==2?'MTC车道':'混合车道'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="laneStatus" label="车道状态"><template #default="scope">
              <div >
                <!--  -->
                <el-switch class="switch" v-model="postExportData[scope.$index].laneStatus" active-value="2"   @change="bindChangeSwitch($event,'postExportData',scope.$index,'laneStatus')"
                  inactive-value="1" />{{postExportData[scope.$index].laneStatus==2?'启用':'禁用'}}
              </div>
              <!-- <div v-else>{{postExportData[scope.$index].laneStatus==2?'启用':'禁用'}}</div> -->
            </template>
          </el-table-column>
          <el-table-column prop="laneType" label="车道类型" width="160">
            <template #default="scope">
              <div >
                <!--    -->
                <el-switch class="switch" v-model="postExportData[scope.$index].laneType" active-text="ETC" inactive-text="人工" active-value="1"  @change="bindChangeSwitch($event,'postExportData',scope.$index,'laneType')"
                  inactive-value="2" />
              </div>
              <!-- <div v-else>{{postExportData[scope.$index].laneType==1?'ETC':'人工'}}</div> -->
            </template>
          </el-table-column>
        </el-table>

        <el-button type="primary" v-if="isExportEdit" @click="submitForm('postExportData')" class="el-btn">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getlaneList, addLane, updateLane, dellane } from "@/api/coordination/lane";
import useUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const { lane_type, lane_name } = proxy.useDict('lane_type', 'lane_name');
const postData = ref([])
const postExportData = ref([])
const multipleSelection = ref([])
const isEdit = ref(false)
const isExportEdit = ref(false)
const multipleExportSelection = ref([])
const deptId = ref()
const isAdd=ref(false)



const bindChangeForm = (val, index, name) => {
  if (isEdit.value) { postData.value[index][name] = val; } else {
    postExportData.value[index][name] = val;
  }

}
const handleSelectionChange = (val, index) => {
  if (index == 1) {
    multipleSelection.value = val
  } else {
    multipleExportSelection.value = val
  }

}
const bindAddTable = (index) => {
  isAdd.value=true;
  if (index == 1) {
    postData.value.push({})
    isEdit.value = true;
    isExportEdit.value = false;
  } else {
    postExportData.value.push({})
    isExportEdit.value = true;
    isEdit.value = false;
  }
}
const bindEditTable = (index) => {
  isAdd.value=false;
  if (index == 1) { isEdit.value = true } else {
    isExportEdit.value = true
  }

}
const bindChangeSelect = (val, index, name) => {
  let arr = name == 'postData' ? postData.value : postExportData.value;
  if (val != 3) {
    arr[index].laneType = val
  }
}
const bindDelTable = (index) => {
  if ((multipleSelection.value.length == 0 && index == 1) || (multipleExportSelection.value.length == 0 && index == 2)) {
    proxy.$modal.msgError("您还未选中");
    return;
  }
  let arr=index == 1?multipleSelection.value:multipleExportSelection.value

  proxy.$modal.confirm('是否确认删除?').then(function () {
    arr.forEach((item, index) => {
      dellane(item.id).then(res => {
        // if (index == multipleSelection.value.length - 1) {
        
        // }
        proxy.$modal.msgSuccess("删除成功");
        getList()
      })
    })

  }).catch(() => { });
}
const bindChangeSwitch = (val, name, index,title) => {
 if(isAdd.value){
  return;
 }
  let data = { outInLane: name == 'postData' ? 1 : 2 };
  let arr = name == 'postData' ? postData.value : postExportData.value;
  arr[index][title]=val;
  updateLane({ ...data, ...arr[index] }).then(response => {
    proxy.$modal.msgSuccess("保存成功");
    // getList()

  });
}
/** 提交按钮 */
const submitForm = (name) => {
  let data = { outInLane: name == 'postData' ? 1 : 2 };

  let arr = name == 'postData' ? postData.value : postExportData.value
 
  arr.forEach((element, index) => {
    if (element.id) {
      updateLane({ ...data, ...element }).then(response => {
        if (index == arr.length - 1) {
          proxy.$modal.msgSuccess("保存成功");
          getList()
          if (name == 'postData') { isEdit.value = false; } else { isExportEdit.value = false; }
        }

      });
    } else {
      addLane([{ ...data, ...element, deptId: deptId.value }]).then(response => {
        if (index == arr.length - 1) {
          proxy.$modal.msgSuccess("保存成功");
          getList()
          if (name == 'postData') { isEdit.value = false; } else { isExportEdit.value = false; }
        }
      });
    }

  });
}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;
      getList()
    }

  })
}

const getList = () => {
  getlaneList(deptId.value).then(res => {
    if (res.code == 200 && res.rows) {
      postData.value = res.rows.filter(item => item.outInLane == 1)
      postExportData.value = res.rows.filter(item => item.outInLane == 2)
    }

  })
}
getDeptId()

</script>

<style scoped>
.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
.subtitle {
  font-size: 14px;
  color: #036ee1;
  padding-left: 10px;
  position: relative;

  font-weight: 600;
  margin-right: 30px;
}
.subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  display: block;
  width: 2px;
  height: 14px;
  background: #036ee1;
}
.purple {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.switch {
  margin: 0 10px 0 10px;
}
.el-btn {
  margin: 20px 0;
}
</style>